<div id="timeslot{{ ts.pk }}"
    class="timeslot {% if ts in in_official_use %}in-official-use{% elif ts in in_use %}in-unofficial-use{% endif %}"
    data-timeslot-pk="{{ ts.pk }}"
    data-date-id="{{ ts.local_start_time.date.isoformat }}"{# used for identifying day/col contents #}
    data-col-id="{{ ts.local_start_time.date.isoformat }}T{{ ts.time|date:"H:i" }}-{{ ts.end_time|date:"H:i" }}" {# used for identifying column contents #}
data-timeslot-name="{{ ts.name }}"
data-timeslot-type="{{ ts.type.slug }}"
data-timeslot-location="{{ ts.location.name }}"
data-timeslot-date="{{ ts.time|date:"l (Y-m-d)" }}"
data-timeslot-time="{{ ts.time|date:"H:i" }}-{{ ts.end_time|date:"H:i" }}"
data-unofficial-use="{% if ts in in_use and ts not in in_official_use %}true{% else %}false{% endif %}"
data-official-use="{% if ts in in_official_use %}true{% else %}false{% endif %}">
<div class="ts-name">
<span title="{% if ts in in_official_use %}Used in official schedule{% elif ts in in_use %}Used in unofficial schedule{% else %}Unused{% endif %}">
{{ ts.name }}
</span>
</div>
<div class="timeslot-buttons">
<a class="text-reset text-decoration-none" aria-label="Edit" href="{% url 'ietf.meeting.views.edit_timeslot' num=ts.meeting.number slot_id=ts.id %}{% if "sched" in request.GET %}?sched={{ request.GET.sched }}{% endif %}">
<i class="bi bi-pencil"></i>
</a>
<i class="bi bi-trash delete-button" data-delete-scope="timeslot" title="Delete this timeslot"></i>
</div>
<div class="ts-type">{{ ts.type }}</div>
</div>